<template>
  <view class="product-with-price flex-column justify-between" v-if="indexProduct < 2 || isShow">
    <view class="product-with-price-title flex-row">
      <view class="product-with-price-title-img">
        <up-image :src="item.img_url || 'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/default.png'" :lazy-load="true" width="132rpx" height="132rpx" radius="10">
          <template #error>
            <view style="font-size: 24rpx;">暂无图片</view>
          </template>
        </up-image>
      </view>
      <view class="product-with-price-title-text">
        <view class="product_name">{{ $ftext(item.name) }}</view>
        <view class="product_pno"><text class="product-price">{{ $fmoney(item.price) }}/{{$ftext(item.unit_name)}}</text> <text class="product-guige">{{$ftext(item.guige)}}</text></view>
        <view class="product_unit flex-row  items-center justify-between">
          <view>
            <text>¥</text>{{ $fnumber(item.total_price) }}
          </view>
          <view class="price-box">
            <text> 数量: </text> <text style="padding-left: 10rpx">{{ item.count }}{{ item.unit_name }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="indexProduct === 1 && !isShow && count > 2" class="total-tip flex-row item-center justify-around" @click.stop="handleShow(true)">
      <view style="padding-left: 250rpx">共计{{count}}件商品</view>
      <up-image src="https://lms-asagroup.oss-cn-beijing.aliyuncs.com/uni-l-owner/st-order-list-bottom%403x.png" width="18rpx" height="18rpx"></up-image>
    </view>
    <view v-if="indexProduct === count -1 && isShow && count > 2" class="total-tip flex-row item-center justify-around" @click.stop="handleShow(false)">
      <view style="padding-left: 250rpx">共计{{count}}件商品</view>
      <up-image src="https://lms-asagroup.oss-cn-beijing.aliyuncs.com/uni-l-owner/st-order-list-top%403x.png" width="18rpx" height="18rpx"></up-image>
    </view>

<!--    <view v-if="indexProduct === count -1 && count <= 2" class="total-tip flex-row item-center justify-around" @click.stop="handleShow(false)">-->
<!--      <view style="padding-left: 250rpx">共计{{count}}件商品</view>-->
<!--    </view>-->

    <view class="line"></view>
  </view>
</template>

<script setup lang="ts">/**
 * @author:  xphu
 * @description 商品清单 cell
 * @param { object} data - 对象{ type: 'loading', message: "加载中"}
 */
import {onLoad} from "@dcloudio/uni-app";

const tmpIsShow = ref(false);
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  indexProduct:{
    type:Number,
    default: 0,
  },
  count:{
    type:Number,
    default: 0,
  },
  isShow:{
    type:Boolean,
    default:false,
  }
});
const emit = defineEmits(['on-update'])
const handleShow = (val: boolean)=>{
  tmpIsShow.value = val
  emit('on-update',tmpIsShow.value)
}
onLoad((options:any) => {

})
</script>

<style lang="scss" scope>
.product-with-price {
  min-height: 160rpx;
  padding-top: 24rpx;
  &-title{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &-img{
      width: 132rpx;
      height: 132rpx;
    }
    &-text{
      margin-left: 20rpx;
      flex: 1;
      //padding-bottom: 26rpx;
      .product_name{
        min-height: 36rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #1A1C27;
        line-height: 36rpx;
      }
      .product_pno{
        min-height: 32rpx;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 32rpx;
        margin-right: 24rpx;
        text-align: center;
        display: inline-block;
        margin-top: 12rpx;
        .product-price{
          color: #1A1C27;
        }
        .product-guige{
          padding-left: 20rpx;
          color: #7F7F7F;
        }
      }
      .product_unit{
        font-family: PingFangSC-Medium, PingFang SC;
        min-height: 36rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #FB553E;
        line-height: 36rpx;
        margin-top: 12rpx;
        text{
          font-size: 24rpx;
        }
      }
      .price-box{
        flex: 1;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7F7F7F;
        text-align: right;
      }
    }
  }
  .line{
    height: 2rpx;
    background: #F4F5F8;
    // margin-top: 24rpx;
  }
  .total-tip{
    width: 100%;
    height: 36rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #BEBEBE;
    line-height: 36rpx;
    text-align: center;
    padding-bottom: 14rpx;
    align-items: center;
    image{
      padding-left: 14rpx;
    }
  }
}
</style>
